import React, { useState, useContext, useEffect } from 'react'
import cont from '../assets/js/cont'
import detailBuild from '../assets/css/detailBuild.module.css'
import detailProject from '../assets/css/detailProject.module.css'
import project from '../assets/css/project.module.css'
import { Modal, Table, message, Select, Space } from 'antd';
import axios from '../axios/index';
import { CloseOutlined } from '@ant-design/icons';
import louyu from '../assets/css/louyu.module.css'

export default function DetailProject(props) {
    let act = useContext(cont);
    let [dataSource, setDataSource] = useState([])
    const { getData, item, manageSattf } = props
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isModalOpen1, setIsModalOpen1] = useState(false);
    let [invest1, setInvest1] = useState(false)
    let [operate1, setOperate1] = useState(false)
    let [show, setShow] = useState(false)
    const [selectedValue, setSelectedValue] = useState(null);
    let [name, setName] = useState('')
    let [save, setSave] = useState(true)

    const columns = [
        {
            title: '登录账号 ',
            dataIndex: 'admin',
            key: 'admin',
        },
        {
            title: '备注姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '项目加入时间',
            dataIndex: 'time',
            key: 'time',
        },
    ]
    const options = dataSource
        .filter(item => item.msg != 1) // 过滤掉msg等于1的项
        .map(item => ({
            value: item.id,
            label: item.name,
        }));

    const handleChange = (value) => {
        console.log(`Selected: ${value}`);
        setSelectedValue(value);
    };

    const saveData = () => {
        if (selectedValue == null) {
            warning1()
            return
        } else {
            axios.put('/api/staff/change', {
                id: selectedValue
            }).then((res) => {
                console.log(res);
                setShow(false)
                getData()
                act.detailChange()
                success1()
            })
        }
    }

    useEffect(() => {
        if (item.invest == 1) {
            setInvest1(true)
        }

        if (item.operate == 1) {
            setOperate1(true)
        }
        getSattf()
    }, [])

    function getImg(url) {
        return new URL(url, import.meta.url).href;
    }

    const handleOk = () => {
        setIsModalOpen(false);
        act.detailChange()
        axios.delete('/api/project/del', {
            params: {
                id: item.id
            }
        }).then((res) => {
            console.log(res);
            getData()
        })
    };
    const handleOk1 = () => {
        setIsModalOpen1(false);
        act.detailChange()
        axios.delete('/api/project/del', {
            params: {
                id: item.id
            }
        }).then((res) => {
            console.log(res);
            getData()
        })
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const handleCancel2 = () => {
        setIsModalOpen1(false);
    };
    const transfer = () => {
        setShow(true)
        console.log(show);
    }

    // 转让
    const warning1 = () => {
        message.open({
            type: 'warning',
            content: '请选择转让人....',
        });
    };

    // 转让成功提示框
    const success1 = () => {
        message.open({
            type: 'success',
            content: '转让成功！',
        });
    };

    let deleteProject = () => {
        setIsModalOpen(true)
    }
    let leaveProject = () => {
        setIsModalOpen1(true)
    }

    let getSattf = () => {
        axios.get('/api//staff').then((res) => {
            console.log(res.data);
            setDataSource(res.data)
        })
    }

    const addProject = () => {
        if (name == '') {
            warning()
            return
        } else {
            axios.put('/api/project/edit', {
                id: item.id,
                name: name,
                invest: invest1 ? 1 : 0,
                operate: operate1 ? 1 : 0
            }).then((res) => {
                console.log(res);
                act.detailChange()
                getData()
                success()
            })
        }
    }

    // 填写提示框
    const warning = () => {
        message.open({
            type: 'warning',
            content: '请填写修改内容....',
        });
    };

    // 新建成功提示框
    const success = () => {
        message.open({
            type: 'success',
            content: '项目名称修改成功！',
        });
    };

    return (
        <div>
            <div className={detailBuild.cover}>
                <img src={getImg('../assets/images/close.png')} alt="" onClick={() => {
                    act.detailChange()
                }} />
                <div className={detailBuild.detail}>
                    <div className={detailProject.head}>
                        <div className={detailProject.left}>
                            {save == true
                                ? <div>
                                    <span>{item.name}</span>
                                    <img src={getImg('../assets/images/edita.png')} alt="" onClick={() => { setName(item.name); setSave(false) }} />
                                </div>
                                : <div className={detailProject.save}>
                                    <div>
                                        <input type="text" value={name} onChange={(e) => { setName(e.target.value) }} />
                                    </div>
                                    <div onClick={() => { addProject() }} style={{cursor:'pointer'}}>保存</div>
                                </div>
                            }
                        </div>
                        <div className={detailBuild.action}>
                            {item.my == 1
                                ? <div className={project.transfer}>
                                    <div className={detailBuild.edit} onClick={() => { transfer() }}>转让</div>
                                    <div onClick={() => { deleteProject() }}>删除</div>
                                </div>

                                : <div onClick={() => { leaveProject() }}>退出</div>
                            }

                        </div>
                    </div>
                    <div className={detailProject.info}>
                        <div className={detailProject.title}>基础信息</div>
                        {dataSource.map((item, index) => {
                            return (
                                <div key={item.id}>
                                    {item.msg == 1 && <div className={detailProject.content}>
                                        <div className={detailProject.people}>
                                            <div>项目管理员</div>
                                            <div>{item.name}</div>
                                        </div>
                                        <div className={detailProject.people}>
                                            <div>项目创建时间</div>
                                            <div>{item.time}  12:32:30</div>
                                        </div>
                                    </div>}
                                </div>

                            )
                        })}

                    </div>
                    <div className={detailProject.item}>
                        <div className={detailProject.itemTitle}>
                            <div className={detailProject.title}>项目人员</div>
                            <div className={detailProject.leave} onClick={() => { manageSattf() }}>管理</div>
                        </div>
                        <div className={detailProject.table}>
                            <Table dataSource={dataSource} columns={columns} pagination={false} />
                        </div>
                    </div>
                    <div className={detailProject.input}>
                        <span>项目模块</span>
                        <div className={project.openModule}>
                            <div className={project.open}>
                                <div>招商</div>
                                <div>空间定价 | 租控 | 租约</div>
                                <button className={invest1 == true ? project.onOpen : project.downOpen}>{invest1 == true ? '已开通' : '开通'}</button>
                            </div>
                            <div className={project.open}>
                                <div>运营</div>
                                <div>公告 | 服务保修 | 投诉建议</div>
                                <button className={operate1 == true ? project.onOpen : project.downOpen}>{operate1 == true ? '已开通' : '开通'}</button>
                            </div>
                            <div className={project.open}>
                                <div>社区</div>
                                <div>即将上线~</div>
                            </div>
                            <div className={project.open}>
                                <div>设备设施</div>
                                <div>即将上线~</div>
                            </div>
                            <div className={project.open}>
                                <div>增值服务</div>
                                <div>即将上线~</div>
                            </div>
                            <div className={project.open}>
                                <div>社区</div>
                                <div>即将上线~</div>
                            </div>
                        </div>
                    </div>
                    <Modal title="此操作是不可恢复的！" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
                        okText="确认"
                        cancelText="取消"
                    >
                        <p>您确认要执行此删除操作吗?</p>
                    </Modal>
                    <Modal title="此操作是不可恢复的！" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel2}
                        okText="确认"
                        cancelText="取消"
                    >
                        <p>您确定要退出{item.name}吗？</p>
                    </Modal>
                </div>
            </div>
            {show &&
                <div className={detailProject.cover}>
                    <div className={detailProject.zhuanrang}>
                        <div className={louyu.head}>
                            <span>项目转让</span>
                            <CloseOutlined style={{ color: "#B4B6BB" }} onClick={() => {
                                setShow(false)
                            }} />
                        </div>
                        <Space wrap>
                            <Select
                                placeholder='项目接收人'
                                style={{
                                    width: 392,
                                }}
                                onChange={handleChange}
                                options={options}
                            />
                        </Space>
                        <button onClick={() => { saveData() }}>保存</button>
                    </div>
                </div>
            }

        </div>

    )
}
